<template>
  <div class="main-center">
    <div style="width: 100%">
      <el-alert type="success" class="main-header-alert" close-text="好的呢！" effect="light">
        <template slot="title">
          <div>
            <i class="iconfont icon-tips"></i>
            <span>  进来不留言评论一下跟蹭蹭不进去有什么区别？≧◉◡◉≦ 好歹正正经经留个名儿啊。</span>
          </div>
        </template>
      </el-alert>
    </div>
    <div>
      <div>
        <h3>小七の博客</h3>
        <p>爱而不得是人间常态，你我又不是什么例外</p>
      </div>
    </div>
    <div class="carousel-box">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3>{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="blog-desc" @click="goto('/blog','BlogDetail',{id: item.id})" v-for="item in blogList" :key="item.id">
      <div class="blog-desc-left">
        <div v-if="item.picture" style="width: 100%;height: 100%">
          <img width="100%" height="100%" :src="item.picture" alt=""
               :onerror="'this.src=' + '\'' + require('@/assets/image/me.jpg') + '\''">
        </div>
      </div>
      <div class="blog-desc-right">
        <div class="blog-title">
          <h2>{{ item.title }}</h2>
        </div>
        <div class="blog-description">
          <p>{{ item.description }}</p>
        </div>
        <div class="blog-base-info">
          <div class="blog-info-category">
            <el-link type="success">{{ item.category.categoryName }}</el-link>
          </div>
          <div class="blog-info-tag">
            <el-tag v-for="tag in item.tagList" :key="tag.id" effect="dark" size="mini" :color="tagColor(tag.id)">
              {{ tag.tagName }}
            </el-tag>
          </div>
        </div>
        <div class="blog-issue-info">
          <div>
            <i class="iconfont icon-username"></i>&nbsp;&nbsp;
            <span>{{ item.user.nickname ? item.user.nickname : item.user.username }}</span>
          </div>
          <div>
            <i class="iconfont icon-date"></i>&nbsp;&nbsp;
            <span>{{ new Date(item.updateTime).format("yyyy年MM月dd日 hh:mm:ss") }}</span>
          </div>
          <div>
            <i class="iconfont icon-eyes"></i>&nbsp;&nbsp;
            <span>{{ item.views ? item.views : 0 }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      style="margin-top: 20px;"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="page.current"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      activeName: "hot",
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      blogList: []
    }
  },
  created() {
    this.getBlogList();
  },
  methods: {
    tagColor(id) {
      return this.$Mine.getColor(id);
    },
    goto(path, name, params) {
      this.$router.push({
        path, name, params
      });
    },
    sizeChange(size) {
      this.page.size = size;
      this.getBlogList();
    },
    currentChange(current) {
      this.page.current = current;
      this.getBlogList();
    },
    getBlogList() {
      this.$get(this.$api.BLOG_LIST_URL, this.page).then(res => {
        if (res.data.code == 200) {
          this.blogList = res.data.data.records;
          this.page.total = res.data.data.total;
        }
      })
    },
    tabChange(tab, event) {

    }
  }
}
</script>

<style scoped>

.el-row {
  padding: 0;
  margin: 0;
}

.main-center {
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.main-header-alert {
  padding: 20px 10px;
  box-shadow: 0 0 7px 1px #a7cda4;
  margin-bottom: 20px;
}

.main-center > div {
  width: 100%;
  text-align: center;
}

.main-center > div h3 {
  margin: 0;
  padding: 0;
  font-size: 28px;
  font-weight: normal;
}

.main-center > div p {
  margin: 0;
  padding: 5px 0 0 0;
  font-size: 14px;
  font-weight: normal;
  color: #a7cda4;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.carousel-box {
  margin-top: 10px;
  width: 100%;
}

.carousel-box > .el-carousel {
  width: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.blog-desc {
  display: flex;
  min-height: 100px;
  max-height: 180px;
  flex-direction: row;
  margin-top: 20px;
  border-radius: 15px;
  box-shadow: 0 0 6px 0px #a7cda4;
  overflow: hidden;
  cursor: pointer;
}

.blog-desc:hover {
  transform: translate(0, -10px);
  transition: .6s;
}

.blog-desc > .blog-desc-left {
  flex: 1;
}

.blog-desc > .blog-desc-right {
  flex: 4;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 50px;
  box-sizing: content-box;
  position: relative;
}

.blog-desc > .blog-desc-right > .blog-title {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.blog-desc > .blog-desc-right > .blog-title h2 {
  font-size: 24px;
  font-weight: 500;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-desc > .blog-desc-right p {
  font-size: 16px;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.blog-desc .blog-desc-right .blog-base-info {
  position: absolute;
  bottom: 30px;
  display: flex;
}

.blog-desc .blog-desc-right .blog-base-info .blog-info-tag .el-tag {
  margin-left: 10px;
  border: 0;
}

.blog-desc .blog-desc-right .blog-issue-info {
  position: absolute;
  bottom: 10px;
  display: flex;
  font-size: 12px;
  color: #838383;
}

.blog-desc .blog-desc-right .blog-issue-info i {
  font-size: 12px;
}

.blog-desc .blog-desc-right .blog-issue-info > div {
  margin-right: 30px;
}


</style>
